import { Fragment } from 'react';
//每个列表渲染的根节点都需一个唯一的key 但是<></>只能使用一个key
// 因此需要使用Fragment来包裹，让所有的根节点都包含key

interface Person {
	id: number;
	name: string;
	profession: string;
}
const people : Person[] = [
	{id : 1, name : 'Bob', profession : 'Engineer'},
	{id : 2, name : 'Alice', profession : 'Doctor'},
	{id : 3, name : 'Tom', profession : 'Lawyer'},
	{id : 4, name : 'Jerry', profession : 'Teacher'},
	{id : 5, name : 'Mike', profession : 'Doctor'},
	{id : 6, name : 'Jane', profession : 'Engineer'},
];
//filter用于过滤数据
const Engineers = people.filter(person=> person.profession === 'Engineer');

//map用于遍历数据
const listItems = Engineers.map(person=>
	<Fragment key={person.id}>
		<li>
			<div>{person.id}</div>
			<div>{person.name}</div>
			<div>{person.profession}</div>
		</li>
		<div>{ person.profession }</div>
	</Fragment>
);

export default function ListItemTpl() {
	return <ul>{listItems}</ul>;
}